<template>
    <div class="common-layout">
        <el-container>
            <el-aside width="200px">
                <div class="title-avatar-container">                    
                    <el-avatar>
                        <img src="../assets/image.png" alt="头像">
                    </el-avatar>
                    <h3 class="mb-2">点餐管理系统</h3>
                </div>
                
                <el-menu :default-active="activeIndex" class="el-menu-vertical-demo full-height" @open="handleOpen"
                    @close="handleClose" router>
                    <el-menu-item index="/dashboard">
                        <el-icon>
                            <HomeFilled />
                        </el-icon>
                        <span>首页</span>
                    </el-menu-item>
                    <el-sub-menu index="2">
                        <template #title>
                            <el-icon>
                                <Suitcase />
                            </el-icon>
                            <span>账号管理</span>
                        </template>
                        <el-menu-item index="/account-list">账号列表</el-menu-item>
                        <el-menu-item index="/add-account">添加账号</el-menu-item>
                        <el-menu-item index="/profile">个人中心</el-menu-item>
                        <el-menu-item index="/change-password">修改密码</el-menu-item>
                    </el-sub-menu>
                    <el-sub-menu index="3">
                        <template #title>
                            <el-icon>
                                <Goods />
                            </el-icon>
                            <span>商品管理</span>
                        </template>
                        <el-menu-item index="/productList">商品列表</el-menu-item>
                        <el-menu-item index="/productAdd">商品添加</el-menu-item>
                        <el-menu-item index="/commodityClassification">商品分类</el-menu-item>
                    </el-sub-menu>
                    <el-menu-item index="/orderManagement">
                        <el-icon>
                            <document />
                        </el-icon>
                        <span>订单管理</span>
                    </el-menu-item>
                    <el-menu-item index="/store">
                        <el-icon>
                            <Shop />
                        </el-icon>
                        <span>店铺管理</span>
                    </el-menu-item>
                    <el-sub-menu index="6">
                        <template #title>
                            <el-icon>
                                <TrendCharts />
                            </el-icon>
                            <span>数据统计</span>
                        </template>
                        <el-menu-item index="/commodityStatistics">商品统计</el-menu-item>
                        <el-menu-item index="/orderStatistics">订单统计</el-menu-item>
                    </el-sub-menu>
                    <el-sub-menu index="7">
                        <template #title>
                            <el-icon>
                                <TrendCharts />
                            </el-icon>
                            <span>权限管理</span>
                        </template>
                        <el-menu-item index="/rights">权限管理</el-menu-item>
                        <el-menu-item index="/role">角色管理</el-menu-item>
                    </el-sub-menu>
                </el-menu>
            </el-aside>

            <el-container class="right-container">
                <el-header height="60px" class="header">
                    <Header />
                </el-header>
                <el-main>
                    <router-view />
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script setup>
import {
    Document,
    Suitcase,
    TrendCharts,
    HomeFilled,
    Shop,
    Goods,
} from '@element-plus/icons-vue'
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import Header from '../components/Header.vue'

const route = useRoute()
const activeIndex = ref(route.path)

const handleOpen = (key, keyPath) => {
    console.log(key, keyPath)
}
const handleClose = (key, keyPath) => {
    console.log(key, keyPath)
}
</script>

<style scoped>
.common-layout {
    height: 100vh;
    overflow: hidden;
}

.right-container {
    width: calc(100vw - 200px);
    height: 100vh;
    overflow: hidden;
}

.header {
    padding: 0;
    background-color: #fff;
    border-bottom: 1px solid #e6e6e6;
}

.el-aside {
    background-color: #2b2f3a;
    color: #fff;
    width: 200px;
    flex-shrink: 0;
    height: 100vh;
    overflow: hidden;
}

.el-menu {
    border-right: none;
}

.full-height {
    height: calc(100vh - 60px);
    width: 100%;
    overflow-y: auto;
}

h3 {
    color: #fff;
    text-align: center;
    height: 60px;
    line-height: 60px;
    margin: 0;
    background-color: #2b2f3a;
}

.el-main {
    background-color: #f0f2f5;
    padding: 20px;
    height: calc(100vh - 60px);
    overflow-y: auto;
}

.title-avatar-container {
    display: flex;
    align-items: center;
    padding: 0 10px;

}

/* 可以根据需要调整 h3 标签的样式 */
.title-avatar-container h3 {
    margin: 0;
    margin-left: 20px;
}
</style>